<template>
  <!-- 分享海报 -->
  <div v-if="posterPop" class="modal">
    <div class="modal-content" id="myImage">
      <Icon type="md-close" color="#FFFFFF" size="32" class="close-icon" @click="posterPop = false" />
      <img v-if="userLanguage.code == 'it_IT'" src="@/assets/images/activity/poster_it.png" class="bg-img" alt="">
      <img v-else-if="userLanguage.code == 'de_DE'" src="@/assets/images/activity/poster_de.png" class="bg-img" alt="">
      <img v-else src="@/assets/images/activity/poster_en.png" class="bg-img" alt="">
      <div class="invite-code">{{ posterObj.inviteCode || '' }}</div>
      <div class="code-img">
        <vue-qr @callback="onQrBack" ref="qr" class="qr-code-image" :margin="0" :text="posterObj.shortLinkUrl"
          tag="svg"></vue-qr>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import VueQr from 'vue-qr'
import html2canvas from '@/common/html2canvas';
export default {
  components: { VueQr },
  name: 'posterCom',
  data() {
    return {
      posterPop: false,
      posterObj: {
        eventCode: '',
        inviteCode: '',
        shortLinkUrl: ''
      }
    }
  },
  computed: {
    ...mapState({
      userLanguage: (state) => state.user.userLanguage,
    })
  },
  methods: {
    open() {
      this.posterPop = true;
    },
    onQrBack(info) {
      console.log(info);
    },
    save(info) {
      this.posterObj = info;
      setTimeout(() => {
        html2canvas(document.querySelector("#myImage")).then((canvas) => {
          const dataURL = canvas.toDataURL('image/png');
          // 创建一个临时的 a 标签用于触发下载
          const link = document.createElement('a');
          link.href = dataURL;
          link.download = 'image.png';
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
      }, 500)
    }
  }
}
</script>
<style lang="less" scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;

  .modal-content {
    width: 800px;
    height: 1000px;
    background: #FFFFFF;
    position: relative;

    .close-icon {
      cursor: pointer;
      position: absolute;
      right: 24px;
      top: 24px;
    }

    .bg-img {
      width: 800px;
      height: 1000px;
    }

    .invite-code {
      font-family: Open Sans, Open Sans;
      font-weight: bold;
      font-size: 36px;
      color: #5139B9;
      line-height: 52px;
      position: absolute;
      left: 60px;
      bottom: 120px;
    }

    .code-img {
      position: absolute;
      right: 56px;
      bottom: 48px;

      .qr-code-image {
        width: 200px;
        height: 200px;
      }
    }
  }
}
</style>